<style lang="scss" scoped>
.container {
  padding: 0 16px;
}
.upload-demo {
  width: 100%;
}
.el-upload-dragger {
  width: 100% !important;
  height: 200px !important;
}
.el-select .el-select--small {
  display: block !important;
}
.el-upload-dragger .el-icon-upload {
  // line-height: 300px !important;
}
.el-upload-list .el-upload-list--text {
  height: 218px;
  overflow: auto;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 主体区 -->
    <div class="container">
      <!-- 表单区 -->
      <div class="form-data-box">
        <el-form
          :model="formBean"
          :rules="validateRules"
          ref="form1"
          label-width="100px"
          class="ruleForm"
          style="width: 80%"
        >
          <el-row style="margin-top: 18px">
            <el-col :span="24" v-if="importType != 'cardApplyBatchId'">
              <el-form-item label="运营商类型" prop="cutype">
                <el-select v-model="formBean.cutype" clearable>
                  <el-option value="cu" label="联通"> </el-option>
                  <el-option value="ct" label="电信"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="importType != 'cardApplyBatchId'">
              <el-form-item label="虚商类型" prop="xushangtype">
                <el-select v-model="formBean.xushangtype" clearable>
                  <el-option value="418" label="海航"> </el-option>
                  <el-option value="401" label="蜗牛"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label prop>
                <div class="fxrow">
                  <el-upload
                    class="upload-demo common"
                    action
                    drag
                    multiple
                    :http-request="uploadFile"
                    show-file-list
                    :file-list="fileList"
                    :on-remove="handleRemove"
                    :on-change="handleFileChange"
                    accept=".xls,.xlsx"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text upload-demo">
                      将文件拖到此处，或
                      <em>选择文件</em>
                      <div class="el-upload__tip" slot="tip">
                        只能上传xls,xlsx文件
                      </div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0" style="position: absolute; top: 390px">
            <el-col :span="24">已选择文件列表：</el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 表单区END -->
      <!-- 按钮操作区 -->
      <span slot="footer" class="form-btn-box">
        <!-- <el-button v-if="!readOnly" @click="resetForm">重 置</el-button> -->
        <el-button v-if="!readOnly" type="primary" @click="toSubmit()"
          >导 入</el-button
        >
        <el-button @click="cnacelForm('form1')">取 消</el-button>
      </span>
      <!-- 按钮操作区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      // 新增用户表单信息
      formBean: {
        operateFileName: "", //上传图片
        cutype: "", //运营商类型
        xushangtype: "", //虚商
      },
      orgNotsele: true,
      // 表单校验规则
      validateRules: {
        operateFileName: [
          { required: true, message: "请上传文件", trigger: "blur" },
        ],
      },
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "",
      importType: "", //导入类型
      // 表单只读状态
      readOnly: false,
      readOnlyEdt: false,
      //字典集
      dicts: {},
      cascaders: {},
      cascaderSelected: {},
      updimgurl: "",
      showTable: false,
      // 查询出的表格数据
      tableData: [],
      fileList: [],
      downloadFileUrl: "",
      // 筛选条件
      parampters: {
        //查询参数
        pageRows: 8, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        province: null,
        city: null,
        provinceCode: "",
        provinceName: "",
        cityCode: "",
        cityName: "",
        productName: "",
        dnsegNum: "",
        cardFaceName: "",
        starttime: "",
        endtime: "",
      },
      previewId: "",
      files: [],
      uploadForm: null,
    };
  },
  props: {
    sourceData: {
      required: true,
    },
  },
  // 进入页面加载数据
  mounted() {
    this.selectedId = this.sourceData.seleid;
    this.actType = this.sourceData.actType;
    this.importType = this.sourceData.importType;
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.uploadForm = new FormData();
    },

    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancel", this.cancelData);
    },
    /**
     * 重置表单
     * @augments formName 表单名称
     */
    resetForm(formName) {
      this.formBean.operateFileName = "";
      this.files = [];
    },
    handleFileChange(file, fileList) {
      // this.fileList = fileList.slice(-1);
    },

    /**
     * 上传excel文件
     */
    uploadFile(params) {
      this.files.push(params.file);
      this.$set(
        this.formBean,
        "operateFileName",
        this.formBean.operateFileName + params.file.name + ";"
      );
      this.uploadForm.append("file", params.file);
    },
    handleRemove(file, fileList) {
      let a = this.files.filter((item, i) => {
        return item.uid != file.uid;
      });
      this.files = a;
    },
    toSubmit() {
      let url = "";
      if (this.importType == "cardApplyBatchId") {
        url = `/herp/cardApplyBatch/${this.selectedId}/importOthers/`;
      } else {
        if (this.formBean.cutype == "") {
          this.$message("请选择运营商类型");
          return;
        }
        if (this.formBean.xushangtype == "") {
          this.$message("请选择虚商商类型");
          return;
        }

        if (this.formBean.cutype == "cu") {
          if (this.formBean.xushangtype == "418") {
            //联通-海航
            url = `/herp/${this.formBean.cutype}/${this.formBean.xushangtype}/importOthers/`;
          } else if (this.formBean.xushangtype == "401") {
            //联通-蜗牛
            url = `/herp/isp/${this.formBean.cutype}/vop/${this.formBean.xushangtype}/importOthers/`;
          }
        } else if (this.formBean.cutype == "ct") {
          //电信-海航
          if (this.formBean.xushangtype == "418") {
            url = `/herp/${this.formBean.cutype}/${this.formBean.xushangtype}/importMobileOthers/`;
          } else if (this.formBean.xushangtype == "401") {
            url = `/herp/isp/${this.formBean.cutype}/vop/${this.formBean.xushangtype}/importOthers/`;
          }
        }
      }
      // let url =
      //   this.importType == "cardApplyBatchId"
      //     ? `/herp/cardApplyBatch/${this.selectedId}/importOthers/`
      //     : `/herp/importOthers/`;
      // console.log("url :>> ", url);
      this.$util.loadingshow();
      this.$axios
        .post(url, this.uploadForm, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          this.$util.loadinghide();
          let data = res.data;
          if (data.success) {
            this.$message({
              type: "success",
              message: data.message,
            });
            this.$emit("ok", {});
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          this.$util.loadinghide();
          console.log(err);
        });
    },
  },
};
</script>
